<template>
	<div class="endCheck">
		<header-com :title="title" moduleName="match"></header-com>
		<tabs :tabList="tabList" :activeTab="defaultId" :status="status" v-on:change="tabsNumChange"></tabs>
		<teamTabs v-show="activeTab==100 || activeTab==1" :slider="slide" v-on:change="slideNumChange"></teamTabs>
		<div v-show="activeTab==100">
			<roundSwiper v-show="shows" :roundList="roundList" v-on:roundNum="roundChange"></roundSwiper>
			<div style="padding: 0.2rem;" v-show="shows">
				<roundNumber :match="signForm" :roundNum="roundNum" :keys="keys" :types="type"></roundNumber>
				<roundForm :form="form" v-if="formshow"></roundForm>
			</div>
			<div v-show="!shows" style="padding: 0.2rem;">暂无数据</div>
		</div>
		<div class="table" v-show="activeTab==1">
			<table>
				<thead>
					<tr>
						<th>姓名</th>
						<th>单位</th>
						<th>本次比赛名次</th>
						<th>本次比赛积分</th>
						<th>总积分</th>
						<th>总名次</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in rangForm" :key="index">
						<td>{{item.user_name}}</td>
						<td>{{item.one_limit}}{{item.two_limit}}{{item.three_limit}}</td>
						<td>{{item.ranking}}</td>
						<td>{{item.series_now}}</td>
						<td>{{item.series_all}}</td>
						<td>{{item.ranking_all}}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div v-if="activeTab==3">
			<div class="match-detail" style="position: fixed;top: 1.7rem !important;width: 100%;height: 100%;">
				<header-com :title="title" moduleName="match"></header-com>
				<!-- <tabs class="tabs" v-model="activeTab" :tabList="tabList" :activeTab="activeTab" :status="status"></tabs> -->
				<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
					<match-end-search :groups="slide" v-on:childByValue="childByValue"></match-end-search>
					<matchBattle class="battle" :matchs="battleList"></matchBattle>
				</scroller>
				<div v-if="battleList.length > 5" class="fixed" @click="scroll">
					<van-icon name="upgrade" />
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import tabs from "./tabs";
	import teamTabs from "./teamTabs";
	import matchEndSearch from "./matchEndSearch";
	import roundSwiper from "./roundSwiper";
	import roundNumber from "./roundNumber";
	import roundForm from "./roundForm";
	import {
		Icon
	} from 'vant';
	import matchBattle from "../../../../components/match/matchBattle";
	export default {
		components: {
			tabs,
			teamTabs,
			roundSwiper,
			matchEndSearch,
			roundNumber,
			roundForm,
			matchBattle,
		},
		data() {
			return {
				battleList: [],
				activeTab: 100,
				com_id: this.$route.query.id,
				title: this.$route.query.name,
				defaultId: parseInt(this.$route.query.defaultId),
				slide: [],
				signForm: [],
				tabList: ["签表展示", "成绩汇总", "技术统计"],
				rangForm: [],
				status: [100, 1, 3],
				roundList: [],
				group_list: [],
				keys: [],
				title: this.$route.query.name,
				roundNum: 0,
				type: null,
				form: [],
				indexs: '',
				loop: [],
				num: 0,
				shows: true,
				formshow: true,
				group: "",
				name: "",
				match_date: "",
				noDate: false,
				offset: 0,
			}
		},
		mounted() {
			this.match_list();
		},
		methods: {
			match_list() {
				var params = new URLSearchParams();
				params.append("com_id", this.$route.query.id);
				this.$axios
					.post("/mobile/matching/search_list", params, {
						// 						headers: {
						// 							token: window.sessionStorage.getItem('token')
						// 						}
					})
					.then(res => {
						if ((res.data.code = 2000)) {
							this.slide = res.data.data.group;
							this.type = this.slide[0].com_system;
							this.signform(res.data.data.group[0].group_id, this.type);
							this.pool(res.data.data.group[0].group_id)
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			pool(group_id) {
				// console.log(group_id)
				var params = new URLSearchParams();
				params.append("com_id", this.$route.query.id);
				params.append("group_id", group_id);
				this.$axios
					.post("/mobile/v1/Platoon/rank_list", params, {
						// 						headers: {
						// 							token: window.sessionStorage.getItem('token')
						// 						}
					})
					.then(res => {
						if ((res.data.code = 2000)) {
							this.rangForm = res.data.data;
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			tabsNumChange(childValue) {
				this.activeTab = childValue
				if(this.activeTab == 3){this.refresh()}
			},
			signform(group_id, type) {
				// console.log(type)
				if (type == 3) {
					var params = new URLSearchParams();
					params.append("group_id", group_id);
					this.$axios
						.post("/mobile/v1/loop/sign_table", params, {
							// 							headers: {
							// 								token: window.sessionStorage.getItem('token')
							// 							}
						})
						.then(res => {
							if ((res.data.code == 200)) {
								this.group_list = res.data.data[0][0];
								this.roundChange(0)
								var arr = []
								let first_wheel = this.slide[this.num].first_wheel
								for (var i = 0; i < first_wheel; i++) {
									arr.push('第' + (i + 1) + '轮')
								}
								arr[arr.length - 2] = "半决赛"
								arr[arr.length - 1] = "决赛"
								// console.log(arr)
								this.roundList = arr
							}
						})
						.catch(res => {
							//  console.log(res.msg);
						});
				}

				if (type == 2) {
					this.indexs = group_id;
					this.roundForms()
					this.loop_platoon()
					// this.roundChange(0)
					var arr = []
					arr[arr.length] = "A组"
					// console.log(arr)
					this.roundList = arr
				}

				if (type == 1) {
					this.indexs = group_id;
					this.roundForms()
					this.loop_platoon()
					var arr = []
					let letter = [];
					let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
					letter = str.split('');
					let first_num = this.slide[this.num].first_num
					let second_wheel = this.slide[this.num].second_wheel
					for (var i = 0; i < first_num; i++) {
						arr.push('第一阶段-' + letter[i] + '组')
					}
					for (var i = 0; i < second_wheel; i++) {
						arr.push('第二阶段-第' + (i + 1) + '轮')
					}
					// console.log(arr)
					this.roundList = arr
				}
				if (type == 4) {
					this.indexs = group_id;
					this.roundForms()
					this.loop_platoon()
					var arr = []
					let letter = [];
					let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
					letter = str.split('');
					let first_wheel = this.slide[this.num].first_wheel
					let second_wheel = this.slide[this.num].second_wheel
					for (var i = 0; i < first_wheel; i++) {
						arr.push('第一阶段-' + letter[i] + '组')
					}
					for (var i = 0; i < second_wheel; i++) {
						arr.push('第二阶段-第' + (i + 1) + '轮')
					}
					// console.log(arr)
					this.roundList = arr
				}
				if (type == null) {
					this.shows = false
				} else {
					this.shows = true
				}
			},
			childByValue(childValue) {
				this.group = childValue.group_id;
				this.name = childValue.name;
				this.match_date = childValue.match_date;
				this.offset = 1
				this.no_ongoing_match()
			},
			slideNumChange(slideNum) {
				// console.log(slideNum)
				this.num = slideNum.i;
				this.type = slideNum.type;
				this.indexs = slideNum.index;
				this.signform(slideNum.index, slideNum.type)
				this.pool(slideNum.index)
				this.roundNum = 0;
				this.formshow = true;
			},
			roundChange(roundNum) {
				this.roundNum = roundNum;
				var keys = [];
				var values = [];
				for (var key in this.group_list[roundNum]) {
					if (this.group_list[roundNum].hasOwnProperty(key) === true) {
						keys.push(key);
						values.push(this.group_list[roundNum][key]);
					}
				}
				if (this.type == 3) {
					this.formshow = false;
					var ke = []
					for (var i = 0; i < keys.length; i++) {
						ke.push(Number(keys[i]) + 1)
					}
					this.keys = ke
					// console.log(values)
					this.signForm = values;
				}
				if (this.type == 1) {
					this.roundForms()
					this.loop_platoon()
				}
				if (this.type == 4) {
					this.loop_platoon()
				}
			},
			roundForms() {
				var params = new URLSearchParams();
				params.append("group_id", this.indexs);
				this.$axios
					.post("/mobile/v1/loop/loop_table", params, {
						// 						headers: {
						// 							token: window.sessionStorage.getItem('token')
						// 						}
					})
					.then(res => {
						if ((res.data.code == 200)) {
							if (this.roundNum >= this.slide[this.num].first_num) {
								this.formshow = false;
							} else {
								this.formshow = true;
								this.form = res.data.data[this.roundNum]
							}

						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			loop_platoon() {
				var params = new URLSearchParams();
				params.append("group_id", this.indexs);
				this.$axios
					.post("/mobile/v1/loop/loop_platoon", params, {
						// 						headers: {
						// 							token: window.sessionStorage.getItem('token')
						// 						}
					})
					.then(res => {
						if ((res.data.code == 200)) {
							if (this.type == 2) {
								this.signForm = res.data.data[0]
							}
							if (this.type == 1) {
								this.signForm = res.data.data[this.roundNum]
							}
							if (this.type == 4) {
								// console.log(res.data.data[this.roundNum])
								this.signForm = res.data.data[this.roundNum]
							}
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			no_ongoing_match() {
				var params = new URLSearchParams();
				params.append("com_id", this.com_id);
				params.append("status", 3);
				params.append("group_id", this.group);
				params.append("match_date", this.match_date);
				params.append("search", this.name);
				params.append("page", this.offset);
				params.append("open_id",  window.localStorage.getItem("openid"));
				this.$axios
					.post("/mobile/matching/no_ongoing_match", params)
					.then(data => {
						if (data.data.code == 2000) {
							if (this.offset == 1) {
								this.battleList = data.data.data //如果是想下滑动，刷新数据 就让items等于最新数据
							} else {
								this.battleList = this.battleList.concat(data.data.data) //否则就把数据拼接
							}
							if (data.data.data.length < 10) { //每次请求数据是10条，如果数据不够10条，就是没数据了 让页数=0；
								// this.offset = 0
								//               fn(true)
								this.noDate = true
							} else {
								// if (fn) fn()
							}
						} else {
							return false;
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			infinite: function(done) {
				if (this.noDate) {
					this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
				} else {
					setTimeout(() => {
						this.offset++; //下拉一次页数+1
						this.no_ongoing_match(done);
						done(); //进行下一次加载操作
					}, 500);
				}
			},
			refresh: function(done) {
				this.offset = 1
				this.noDate = false;
				setTimeout(() => {
					this.no_ongoing_match(done);
					this.$refs.myscroller.finishPullToRefresh(); //停止下拉刷新动效
				}, 300)
			},
// 			childByValue(childValue) {
// 				this.offset = 1
// 				this.group = childValue.group_id;
// 				this.name = childValue.name;
// 				this.match_date = childValue.match_date;
// 				this.no_ongoing_match()
// 			},
			scroll() {
				let scroller = this.$refs.myscroller
				scroller.scrollTo(0, 0, true)
			}
		}
	}
</script>
<style scoped>
	.table {
		padding: 0.4rem 0.2rem;
	}

	table {
		border-collapse: collapse;
		border: none;
		width: 100%;
	}

	th,
	td {
		border: 1px solid #42B574;
		padding: 0.1rem 0.05rem;
	}

	.fixed {
		position: fixed;
		bottom: 50px;
		right: 10px;
		width: 30px;
		height: 30px;
		font-size: 26px;
	}

	.match-detail {
		margin-bottom: 1.1rem;
	}

	.tabs {
		position: fixed;
		top: 45px;
		z-index: 9999;
		width: 100%;
	}
</style>
